<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}} - CodeSphere OJ</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 使用官方 jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.2/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.2/ext-language_tools.js"></script>
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --accent: #4895ef;
            --light: #f8f9fa;
            --dark: #212529;
            --success: #4cc9f0;
            --danger: #f72585;
            --warning: #f8961e;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: var(--light);
            color: var(--dark);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* 导航栏 */
        nav {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 20px 0;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
        }
        
        .logo i {
            margin-right: 10px;
            color: var(--accent);
        }
        
        .nav-links {
            display: flex;
            gap: 30px;
        }
        
        .nav-links a {
            color: var(--dark);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }
        
        .nav-links a:hover {
            color: var(--primary);
        }
        
        /* 题目内容区域 */
        .problem-container {
            display: flex;
            gap: 30px;
            margin: 30px 0;
        }
        
        .problem-content {
            flex: 1;
            background-color: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        
        .problem-header {
            margin-bottom: 30px;
        }
        
        .problem-title {
            font-size: 1.8rem;
            margin-bottom: 10px;
            color: var(--dark);
        }
        
        .problem-meta {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .problem-id {
            color: #666;
            font-weight: 500;
        }
        
        .problem-difficulty {
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 5px;
        }
        
        .difficulty-easy {
            background-color: rgba(76, 201, 240, 0.1);
            color: var(--success);
        }
        
        .difficulty-medium {
            background-color: rgba(248, 150, 30, 0.1);
            color: var(--warning);
        }
        
        .difficulty-hard {
            background-color: rgba(247, 37, 133, 0.1);
            color: var(--danger);
        }
        
        .problem-description {
            margin-bottom: 30px;
        }
        
        .problem-description h3 {
            font-size: 1.3rem;
            margin: 20px 0 10px;
            color: var(--dark);
        }
        
        .problem-description p {
            margin-bottom: 15px;
        }
        
        .problem-description pre {
            background-color: #f5f5f5;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
            margin: 15px 0;
        }
        
        .problem-description ul, 
        .problem-description ol {
            margin: 15px 0 15px 20px;
        }
        
        /* 代码编辑器区域 */
        .editor-container {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .editor-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .language-selector {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: white;
        }
        
        .editor-wrapper {
            flex: 1;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        
        #editor {
            height: 400px;
            width: 100%;
        }
        
        /* 提交按钮区域 */
        .submit-area {
            margin-top: 20px;
            display: flex;
            justify-content: flex-end;
        }
        
        .submit-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 5px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .submit-btn:hover {
            background-color: var(--secondary);
        }
        
        /* 测试结果区域 */
        .test-results {
            margin-top: 30px;
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        
        .test-results h3 {
            font-size: 1.3rem;
            margin-bottom: 15px;
            color: var(--dark);
        }
        
        .test-case {
            margin-bottom: 15px;
            padding: 15px;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        
        .test-case-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-weight: 500;
        }
        
        .test-case-success {
            color: var(--success);
        }
        
        .test-case-failure {
            color: var(--danger);
        }
        
        .test-case-input,
        .test-case-output,
        .test-case-expected {
            margin-bottom: 8px;
        }
        
        .test-case-label {
            font-weight: 500;
            color: #666;
            margin-right: 10px;
        }
        
        /* 页脚 */
        footer {
            background-color: var(--dark);
            color: white;
            padding: 50px 0 20px;
            text-align: center;
        }
        
        .footer-content {
            margin-bottom: 30px;
        }
        
        .footer-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .footer-links a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-links a:hover {
            color: var(--accent);
        }
        
        .copyright {
            color: rgba(255,255,255,0.7);
            font-size: 0.9rem;
        }

        .compile-error {
            background-color: #fff5f5;
            border-left: 4px solid #f72585;
            padding: 15px;
            margin-top: 15px;
            border-radius: 4px;
            font-family: monospace;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        .compile-error pre {
            margin: 0;
            color: #e53e3e;
            line-height: 1.5;
        }

        /* 运行时错误样式 */
        .runtime-error {
            background-color: #fff5f5;
            border-left: 4px solid #f72585;
            padding: 15px;
            margin: 15px 0;
            border-radius: 4px;
            font-family: monospace;
        }

        .runtime-error pre {
            margin: 0;
            color: #e53e3e;
            white-space: pre-wrap;
        }

        /* 程序输出样式 */
        .program-output {
            background-color: #f8f9fa;
            border-left: 4px solid #4895ef;
            padding: 15px;
            margin: 15px 0;
            border-radius: 4px;
            font-family: monospace;
        }

        .program-output pre {
            margin: 0;
            color: #333;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav>
        <div class="container navbar">
            <a href="/index.html" class="logo">
                <i class="fas fa-code"></i>
                CodeSphere
            </a>
            <div class="nav-links">
                <a href="/index.html">首页</a>
                <a href="all_questions.html">题库</a>
                <a href="#">竞赛</a>
                <a href="#">讨论</a>
                <a href="#">关于</a>
            </div>
        </div>
    </nav>

    <!-- 题目内容区域 -->
    <div class="container">
        <div class="problem-container">
            <!-- 题目描述部分 -->
            <div class="problem-content">
                <div class="problem-header">
                    <h1 class="problem-title">{{title}}</h1>
                    <div class="problem-meta">
                        <span class="problem-id">题目编号: {{id}}</span>
                        <span class="problem-difficulty difficulty-{{difficulty}}">{{difficulty_text}}</span>
                    </div>
                </div>
                
                <div class="problem-description">
                    <!-- 题目描述内容，使用ctemplate动态生成 -->
                    <pre>{{description}}</pre>
                </div> 
            </div>
            
            <!-- 代码编辑器部分 -->
            <div class="editor-container">
                <div class="editor-toolbar">
                    <select class="language-selector" id="language-selector">
                        <option value="c_cpp">C++</option>
                        <option value="java">Java</option>
                        <option value="python">Python</option>
                        <option value="javascript">JavaScript</option>
                    </select>
                </div>
                
                <div class="editor-wrapper">
                    <div id="editor">{{initial_code}}</div>
                </div>
                
                <div class="submit-area">
                    <button class="submit-btn" id="submit-btn">提交代码</button>
                </div>
                
                <!-- 测试结果区域 -->
                <div class="test-results" id="test-results">
                    <h3>测试结果</h3>
                    <!-- 这里将使用ctemplate动态生成测试结果 -->
                    {{#test_cases}}
                    <div class="test-case">
                        <div class="test-case-header">
                            <span>测试用例 #{{test_case_num}}</span>
                            <span class="test-case-{{status}}">{{status_text}}</span>
                        </div>
                        <div class="test-case-input">
                            <span class="test-case-label">输入:</span>
                            <span>{{input}}</span>
                        </div>
                        <div class="test-case-output">
                            <span class="test-case-label">输出:</span>
                            <span>{{output}}</span>
                        </div>
                        <div class="test-case-expected">
                            <span class="test-case-label">预期:</span>
                            <span>{{expected}}</span>
                        </div>
                    </div>
                    {{/test_cases}}
                    <!-- 动态生成结束 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <a href="index.html" class="logo" style="color: white; margin-bottom: 20px; display: inline-block;">
                    <i class="fas fa-code"></i>
                    CodeSphere
                </a>
                <p>让编程学习变得更简单、更高效</p>
            </div>
            <div class="footer-links">
                <a href="index.html">首页</a>
                <a href="all_questions.html">题库</a>
                <a href="#">竞赛</a>
                <a href="#">讨论</a>
                <a href="#">关于我们</a>
                <a href="#">帮助中心</a>
            </div>
            <div class="copyright">
                &copy; 2023 CodeSphere OJ. All rights reserved.
            </div>
        </div>
    </footer>

    <script>
        // 初始化ACE编辑器
        const editor = ace.edit("editor");
        editor.setTheme("ace/theme/chrome");
        editor.session.setMode("ace/mode/c_cpp");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableLiveAutocompletion: true,
            fontSize: "14px"
        });
        
        // 语言选择器事件
        document.getElementById("language-selector").addEventListener("change", function() {
            const language = this.value;
            let mode;
            switch(language) {
                case "c_cpp":
                    mode = "ace/mode/c_cpp";
                    break;
                case "java":
                    mode = "ace/mode/java";
                    break;
                case "python":
                    mode = "ace/mode/python";
                    break;
                case "javascript":
                    mode = "ace/mode/javascript";
                    break;
                default:
                    mode = "ace/mode/text";
            }
            editor.session.setMode(mode);
        });
        
        // 提交按钮事件
        document.getElementById("submit-btn").addEventListener("click", function() {
            // 这里可以添加提交代码的逻辑
            // 1. 收集当前页面的有关数据
            const code = editor.getValue();  // 用户写的代码
            // console.log(code);
            const language = document.getElementById("language-selector").value;  // 用户选择的语言
            var num = "{{id}}";  // 当前题目编号
            // console.log(num);
            var judge_url = "/judge/" + num;  // judge 的地址
            // console.log(judge_url);
            // 2. 构建 json，并通过ajax向后端发起基于 http 的 json 请求
            $.ajax({
                method: 'Post',  // 向后端发起请求的方式
                url: judge_url,  // 向后端指定的 url 发起请求
                dataType: 'json',  // 告知 server，我需要什么格式
                contentType: 'application/json;charset=utf-8',  // 告知server，我给你的是什么格式
                data: JSON.stringify({
                    'code': code,
                    'input': ''
                }),
                success: function(data){
                    // 成功得到结果:会将结果自动放到 data 中
                    // console.log(data);
                    show_result(data);
                }
            });
            // 3. 得到结果，解析并显示到 result 中
            // data 是一个 json 类型的字符串
            function show_result(data)
            {
                // console.log(data.status);
                // console.log(data.reason);
                // 首先拿到结果的状态码以及原因结果
                var _status = data.status;
                var _reason = data.reason;
                // 拿到结果的标签
                var result_label = document.getElementById("test-results");
                if(_status != 0)
                {
                    // 编译错误
                    result_label.innerHTML = `
                        <h3>编译错误</h3>
                        <div class="compile-error">
                            <pre>${_reason}</pre>
                        </div>
                    `;      
                }
                else
                {
                    // 请求是成功的，编译运行过程没有出现问题，但是结果是否正确还是得看测试用例的结果是否正确
                    var _stdout = data.stdout;
                    var _stderr = data.stderr;
                    let html = '';
                    if(_stdout)
                    {
                        html = `
                            <h3>程序输出</h3>
                            <div class="program-output">
                                <pre>${_stdout}</pre>
                            </div>
                        `;
                    }
                    if(_stderr)
                    {
                        html = `
                            <h3>运行时错误</h3>
                            <div class="runtime-error">
                                <pre>${_stderr}</pre>
                            </div>
                        `;
                    }
                    result_label.innerHTML = html;
                }
            }


            // console.log("提交代码:", {
            //     code: code,
            //     language: language
            // });
            
            // 模拟测试结果 - 实际应用中应该从服务器获取
            // document.getElementById("test-results").innerHTML = `
            //     <h3>测试结果</h3>
            //     <div class="test-case">
            //         <div class="test-case-header">
            //             <span>测试用例 #1</span>
            //             <span class="test-case-success">通过</span>
            //         </div>
            //         <div class="test-case-input">
            //             <span class="test-case-label">输入:</span>
            //             <span>nums = [2,7,11,15], target = 9</span>
            //         </div>
            //         <div class="test-case-output">
            //             <span class="test-case-label">输出:</span>
            //             <span>[0, 1]</span>
            //         </div>
            //     </div>
            //     <div class="test-case">
            //         <div class="test-case-header">
            //             <span>测试用例 #2</span>
            //             <span class="test-case-success">通过</span>
            //         </div>
            //         <div class="test-case-input">
            //             <span class="test-case-label">输入:</span>
            //             <span>nums = [3,2,4], target = 6</span>
            //         </div>
            //         <div class="test-case-output">
            //             <span class="test-case-label">输出:</span>
            //             <span>[1, 2]</span>
            //         </div>
            //     </div>
            // `;
        });
    </script>
</body>
</html>